<template>
    <div>
       <el-form :inline="true" class="clearfix">
           <div class="fl query-l clearfix">
               <div class="fl">
                    <div>   
                        <el-form-item label="悬赏编号">
                            <el-input v-model = "data.rewardNo"></el-input>
                        </el-form-item>
                    </div>
                    <div>    
                        <el-form-item label="悬赏名称">
                                <el-input v-model = "data.name"></el-input >
                        </el-form-item>  
                    </div>
               </div>
               <div class="fl">
                    <div>
                        <el-form-item label="项目状态">
                            <el-select clearable  placeholder="请选择" v-model = data.status.value>
                                <el-option
                                    v-for = "item in data.status.options"
                                    :key = "item.value"
                                    :value = "item.value"
                                    :label = "item.label"
                                ></el-option>
                            </el-select> 
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="项目专员">
                            <el-select clearable  placeholder="请选择" v-model = "data.specialistId.value">
                                <el-option
                                    v-for = "item in specialist"
                                    :key = "item.id"
                                    :value = "item.id"
                                    :label = "item.name"
                            ></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
               </div>
               <div class="fl">
                    <div>
                        <el-form-item label="发布时间">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model = "data.publishTimeStart"
                            >
                            </el-date-picker>
                            <span>至</span>
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model = "data.publishTimeEnd"
                            >
                            </el-date-picker>
                         </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="关闭时间">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model = "data.doneTimeStart"
                            >
                            </el-date-picker>
                            <span>至</span>
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model = "data.doneTimeEnd"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </div>
               </div>
                <el-form-item label="发包方">
                     <el-select clearable v-model = data.isInternal.value>
                        <el-option
                            v-for = "item in data.isInternal.options"
                            :key = "item.value"
                            :value = "item.value"
                            :label = "item.label"
                        ></el-option>
                     </el-select>
                </el-form-item>
            </div>
            <div class="fr">
                <el-button type="primary" @click="queryForAll">查询</el-button>
            </div>
            </el-form>
            <el-table :data="data.list" border row-class-name="text-center" height="364" class="user-table" >
                <el-table-column label="项目编号" :show-overflow-tooltip = "true" prop="rewardNo">
                </el-table-column>
                <el-table-column label="项目名称" :show-overflow-tooltip = "true" >
                    <template scope="scope">
                        <router-link :to="`/project/caseDetail?id=${scope.row.id}`" class="color02 pointer">
                            <span @click="keepLive">{{scope.row.name}}</span>
                        </router-link>
                        <span v-if = "scope.row.isInternal == 1" class="isInternal-icon">内</span>
                    </template>
                </el-table-column>
                <el-table-column label="赏金" :show-overflow-tooltip = "true" prop="bounty">
                </el-table-column>
                <el-table-column label="周期" :show-overflow-tooltip = "true" prop="expectedDuration">
                </el-table-column>
                <el-table-column label="发包方" :show-overflow-tooltip = "true" prop="userAccountName">
                    <template scope="scope">
                        <span @click = "getUserInfo(scope.row.userAccountId, 1)" class="color02 pointer">{{scope.row.userAccountName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" :show-overflow-tooltip = "true" prop="publishTime">
                </el-table-column>
                <el-table-column label="项目状态">
                    <template scope="scope">
                         <span>{{computeStatus(scope.status)}}</span>
                     </template>
                </el-table-column>
                <el-table-column label="报名人数" :show-overflow-tooltip = "true" prop="applyCount">
                     <template scope="scope">
                        <span @click = "showApplyCountActive(scope)" class="color02 pointer">{{scope.row.applyCount}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="赏金得主" :show-overflow-tooltip = "true" prop="bountyWinnerUserAccountNickname">
                     <template scope="scope">
                        <span @click = "getUserInfo(scope.row.bountyWinnerUserAccountId, 2)" class="color02 pointer">{{scope.row.bountyWinnerUserAccountNickname}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="关闭时间" :show-overflow-tooltip = "true" prop="statusLastTime">
                </el-table-column>
                <el-table-column label="项目专员" :show-overflow-tooltip = "true" prop="specialistName">
                </el-table-column>
            </el-table>
            <div class="pagination-wrapper clearfix" v-if="data.totalPage>1">
                <div class="fr mt-10">
                    <span class="page-num font-14">
                        总数：<span v-text="100"></span> 每页显示 <span v-text="5"></span>  条 共 <span v-text="100"></span> 页
                    </span>
                    <el-pagination class="fr" @current-change="changePage" :current-page="data.currentPage" :page-size="data.pageSize" layout="prev, pager, next" :total="data.totalCount">
                    </el-pagination> 
                </div>
            </div>  
    </div>
</template>
<script>
    export default {
        props: ['data', 'showUserAccoun', 'showApplyCount', 'showbountyWinner', 'specialist'],
        methods: {
            keepLive () {
                this.$emit('keepLive')
            },
            // 触发父组件查询
            queryForAll () {
                this.$emit('query')
            },
            // 返回项目状态
            computeStatus (status) {
                if (status === '4') {
                    return '已完成'
                } else if (status === '6') {
                    return '仲裁中'
                } else if (status === '7') {
                    return '已下架'
                } else {
                    return '已关闭'
                }
            },
            // 翻页
            changePage (currentPage) {
                this.$emit('changePage', currentPage)
            },
            // 显示报名人数
            showApplyCountActive (scope) {
                this.showApplyCount.show = true
                this.$emit('getSchemeList', 1, 10, scope.row.id)
            },
            // 获取用户信息
            getUserInfo (id, type) {
                this.$emit('getUserInfo', id, type)
            }
        }
    }
</script>